<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Toaster from "@/components/ui/toast/Toaster.vue";
import { isMac } from './utils';

const isDark = ref(false)

onMounted(() => {
  if (sessionStorage.getItem('theme')) {
    if (sessionStorage.getItem('theme') === 'dark') {
      isDark.value = true
      document.documentElement.classList.add('dark')
    } else {
      isDark.value = false
      document.documentElement.classList.remove('dark')
    }
  } else {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      isDark.value = true
      document.documentElement.classList.add('dark')
    }
  }

  if (!isMac()) {
    document.documentElement.classList.add('not-mac-scrollbar')
  }
})
</script>

<template>
  <router-view />
  <Toaster />
</template>

<style scoped></style>
